<template>
  <div class="tabletitle">
      <div class="table-name">
      <div>姓名</div>
       <a-input placeholder="输入姓名"  v-model="fillter.name" style="width: 200px"/>
   </div>
      
    <div class="table-sex">
      <div>性别</div>
      <a-select default-value="全部" style="width: 120px"   v-model="fillter.sex">
      <a-select-option v-for="item in $options.sexOptions"
          :key="item.value"
          :value="item.value">
        {{ item.label }}
      </a-select-option>
      
     </a-select>
     
    </div>
    <div class="table-lv">
      <div>权限</div>
      <a-select default-value="全部" style="width: 120px" v-model="fillter.lv">
      <a-select-option v-for="item in $options.lvOptions"
          :key="item.value"
          :value="item.value">
        {{ item.label }}
      </a-select-option>
      
     </a-select>
     
    </div>
    <a-button class="btn"  type="primary" @click="clickHandler">搜索</a-button>
    <a-button class="btn"  type="primary" @click="resetData">重置</a-button>
    <a-button class="btn"  type="primary" @click="addUserData(fillter)">添加用户</a-button>
     
  </div>
</template>

<script>
import { SEX_OPTIONS, LV_OPTIONS, DEFAULT_FILTER } from "../list/config";
export default {
  name: "WorkspaceJsonTabletitle",
  sexOptions: SEX_OPTIONS,
  lvOptions: LV_OPTIONS,
  props: {
    getAllData: Function,
    addUserData:Function,
    
  },
  data() {
    return {
      fillter: {
        ...DEFAULT_FILTER,
      },
    };
  },

  mounted() {},

  methods: {
    clickHandler() {
      this.getAllData(this.fillter);
      this.fillter = { ...DEFAULT_FILTER };
    },
    resetData() {
      this.fillter = { ...DEFAULT_FILTER };
    },
   
  },
};
</script>

<style lang="scss" scoped>
.btn{
    flex: 1;
    margin-left:10px ;
    margin-top:20px ;
} 
.tabletitle{
    display: flex;
} 
.table-name{
   
    flex: 5;
}
.table-lv{
    flex: 5;
}
.table-sex{
    flex: 5;
}
</style>